<template>
	<view>
		<view class="mask" @tap="maskTouch"
			:style="{ opacity: show ? '1' : '0', visibility: show ? 'visible' : 'hidden' }"></view>
		<view class="main-box" :style="{ transform: show ? 'translateY(0)' : 'translateY(100%)' }">
			<view class="top-box">
				<view class='ys-list'>
					<view class="ys-list-title" v-if="type==='2'?true:false">产品参数</view>
					<view class="ys-list-title" v-if="type==='3'?true:false">配送至</view>
					<!-- <view>配送至</view> -->
					<icon @tap="maskTouch" style="flex: 1;text-align: right;flex-direction: row;" type="clear"
						size="20" />
					<!-- <text  style="flex: 1;text-align: right;flex-direction: row;border: 1rpx solid red;" >确定</text> -->
				</view>

			</view>
			<view class="scroll-box" :style="{'height':scrollHeight + 'rpx'}">
				<scroll-view scroll-y="true" style="height: 100%;">
					<!-- 已选 -->
					<view style="display: flex;" v-if="type==='1'?true:false">
						<image class="left" :src="list.goods.goodsImageList[0].url" mode="aspectFit"></image>
						<view class="right" style="margin-top:30rpx;">
							<text class="price clamp">￥{{list.protocol.goodsPrice}}</text>
							<view class="atrr-box"  style="margin-top: 30rpx;">
							  	    
							  	<text v-if=" (!hasLogin) && isShowStockUnlogin" >库存：</text>
							<text v-if=" (!hasLogin ) && actualRemainAmount && isShowStockUnlogin">{{list.protocol.actualRemainAmount}}</text>
							<text v-if=" (!hasLogin ) && !actualRemainAmount && isShowStockUnlogin">{{list.protocol.actualRemainAmount}}</text>
							
							
							<text v-if=" (hasLogin) && isShowStock" style="margin-left:10px;">库存：</text>
							<text v-if=" (hasLogin ) && actualRemainAmount && isShowStock">{{list.protocol.actualRemainAmount}}</text>
							<text v-if=" (hasLogin) && !actualRemainAmount && isShowStock">{{list.protocol.actualRemainAmount}}</text>
							  	    
							  	  </view>
							<!-- <view class="atrr-box" style="margin-top: 30rpx;">
								<view style="float: left;width: fit-content;">库存:{{list.protocol.stockStateDesc}}</view>
							</view> -->
							<view style="margin-top: 10rpx;">
								<view style="float: left;width: fit-content;">已选:{{selectProduct}}</view>
							</view>
							<!-- 	<view class="bottom">
							<image src="../../static/cart.png" @click.stop="addCart()"></image>
						</view> -->
						</view>
					</view>
					<view style="margin-top: 10rpx;" v-if="type==='1'?true:false">
						<helang-checkbox ref="checkbox" @click='loadData(this.goodsId)' :res='res'
							:goodsData='goodsData' :skuItems='skuItems' @change="onChange" :selectedItem='selectedItem'
							:selectDatas='selectDatas'></helang-checkbox>

					</view>

					<!-- 产品参数 -->
					<view class="c-list" v-if="type==='2'?true:false">
						<view class="c-row b-b" v-for="(item,index) in list.goods.specList" :key="index">
							<text class="tits">{{item.specName}}</text>
							<text class="con t-r m-message">{{item.specValueList[0].valueName}}</text>
						</view>

					</view>

					<!-- 配送至 -->
					<view class="c-list" v-if="type==='3'?true:false">
						<view class="c-row b-b" style="justify-content: space-between;" @click="toggleTab">
							<text class="tits-ps">选择其他地区</text>
							<text class="yticon icon-you"></text>
						</view>
						<!-- 选择收货地址 -->
						<uni-popup ref="popup" type="bottom">
							<view class="popup">
								<view class="picker-btn">
									<view class="lefts" @click="cancel">取消</view>
									<view class="rights" @click="confirm">确定</view>
								</view>
								<picker-view :indicator-style="indicatorStyle" :value="valueArr" @change="bindChange">
									<picker-view-column>
										<view class="item" v-for="(item,index) in province" :key="index">{{item.name}}
										</view>
									</picker-view-column>
									<picker-view-column>
										<view class="item" v-for="(item,index) in province&&province[valueArr[0]]?province[valueArr[0]].children||[]:[]"
											:key="index">{{item.name}}</view>
									</picker-view-column>
									<picker-view-column>
										<view class="item"
											v-for="(item,index) in province[valueArr[0]]&&province[valueArr[0]].children?province[valueArr[0]].children[valueArr[1]].children||[]:[]"
											:key="index">{{item.name}}</view>
									</picker-view-column>
									<picker-view-column>
										<view class="item"
											v-for="(item,index) in province[valueArr[0]]&&province[valueArr[0]].children&&province[valueArr[0]].children[valueArr[1]].children?province[valueArr[0]].children[valueArr[1]].children[valueArr[2]].children||[]:[]"
											:key="index">{{item.name}}</view>
									</picker-view-column>
								</picker-view>
							</view>
						</uni-popup>

						<view class="s-list b-b" v-for="(item, index) in addrData.records" :key="index"
							@click="checkAddress(item)">
							<view class="wrapper">
								<view class="address-box" :class="{'active': selectIndex == item.id }">
									<text v-if="item.isDefault" class="tag">默认</text>
									<view class="address">{{item.areaName}} {{item.addr}}</view>
								</view>
								<!-- 	<view class="u-box">
									<text class="name">{{item.consigneeName}}</text>
									<text class="mobile">{{item.mobile}}</text>
								</view> -->
							</view>
							<!-- <text class="yticon icon-bianji" @click.stop="addAddress('edit', item)"></text> -->
							<!-- <image class="delete" mode="aspectFill" src="../../static/delete.png" @click.stop="delAddr(item)"></image> -->
						</view>
					</view>


				</scroll-view>

			</view>
			<view class="top-box">
				<view v-if="type==='1'?true:false" style="justify-content: space-between;display: flex;">
					<view>数量</view>
					<!-- 选择数量 -->
					<lxc-count @handleCount="handleCountClick" :value="addnum" :delayed="100">
					</lxc-count>
				</view>

			</view>
			<view style="display: flex;padding: 0 30rpx;" v-if="type==='1'?true:false">
				<button type="warn" class="select-btn-add" @click="addCarts">{{hasLogin?'加入购物车':'登录查看'}}</button>
				<button type="default" class="select-btn-buy" @click="buyGood">{{hasLogin?'立即购买':'登录查看'}}</button>
			</view>
			<view style="display: flex;padding: 0 30rpx;" v-if="type==='3'?true:false">
				<button type="warn" style="width: 100%;" @click="addAddress('add',{})">新增地址</button>
			</view>
		</view>
	</view>
</template>

<script>
	// 计数器
	import lxcCount from '@/components/lxc-count/lxc-count.vue'
	// 单选
	import helangCheckbox from "@/components/helang-checkbox/helang-checkbox.vue"
	import {
		checkSkip,
		addToCart
	} from '../../api/cart/cart.js'
	import {
		mapState
	} from 'vuex';
	// import {
	// 	cart,
	// 	remove,
	// 	edit,
	// 	checkChange,
	// 	checkSkip
	// } from '../../api/cart/cart.js'
	import {
		getAddressList,
		deleteAddr,
		bugGoods
	} from '../../api/order/order.js'
	import {
		setDefault,
		updateAddr,
		addAddr,
		loadAddr,
		loadChildAddr
	} from '../../api/order/order.js'
	export default {
		name: 'z-multi-choose',
		components: {
			lxcCount,
			helangCheckbox
		},
		props: {
			stockStatus:{
				type: String
			},
			addnum: {
				type: Number,
				// default:0
			},
			areaId: {
				type: String,
			},
			type: {
				type: String
			},
			selectGood: {
				type: String,

			},
			selectDatas: {
				type: Array,
				default: function () {
					return [];
				},
			},
			selectedItem: {
				type: Array,
				default: () => {
					// return [true, true, true, true]
				}
			},
			// province: {
			// 	type: Array
			// },
			skuItems: {
				type: Array
			},
			children: {
				type: Array,
				default: () => {
					return [true, true, true, true]
				}
			},
			show: {
				type: Boolean,
				default: false
			},
			list: {
				type: Object,
				default: {}
			},
			res: {
				type: Object,
				default: {}
			},
			goodsData: {
				type: Object,
				default: {}
			},
			showKey: {
				type: String,
				default: 'text'
			},
			idKey: {
				type: String,
				default: 'id'
			},
			activeColor: {
				type: String,
				default: '#007aff'
			},
			scrollHeight: {
				type: Number,
				default: 500
			},
			btnShowControls: {
				type: Array,
				default: () => {
					return [true, true, true, true]
				}
			},
			actualRemainAmount: {
				type: Boolean,
				default: false
			},
			btnColors: {
				type: Array,
				default: () => {
					return ['#007aff', '#007aff', '#007aff', '#007aff']
				}
			},
			contentTextColor: {
				type: String,
				default: '#111111'
			},
			contentFontSize: {
				type: String,
				default: '28rpx'
			},
			itemHeight: {
				type: Number,
				default: 100
			},
			updateAddress:{
				type: Boolean,
				default: false
			},
			sampleApplication:{
				type:Boolean,
				default:false
			},
			isShowStock: {
				type:Boolean,
				default:true
			}
		},


		watch: {
			// 已选商品
			selectGood:{
				handler(newName, oldName) {
					console.log('newName',newName);
					this.selectProduct = newName
				
				},
			},
			// 可以选择的商品
			selectDatas: {
				handler(newName, oldName) {
					console.log('第二层selectDatas', newName)
					// console.log('oldName',oldName)
					// this.selectDatas=newName
					this.$nextTick(() => {
						// setTimeout(() => {
						for (var i = 0; i < this.selectDatas.length; i++) {
							// console.log('第三层设置的值',this.selectDatas[i].data)
							// console.log('第三层设置的值',this.selectDatas[i])
							// console.log('this.$refs.checkbox',this.$refs.checkbox)
							if (this.$refs.checkbox !== undefined) {
								// this.$refs.checkbox[i].set(this.selectDatas[i].data);
								// this.$refs.checkbox[i].set(this.selectDatas[i]);

							}
						}
						// }, 200)


					})
				},
				deep: true,
			},
			selectedItem: {
				handler(newName, oldName) {
					console.log('第二层selectedItem==========================', newName)
						this.selectProduct=[]
						this.selectedItem=newName
						// console.log('this.selectProduct', this.selectProduct)
						for (let i = 0; i < newName.length; i++) {
					
							this.selectProduct.push(newName[i])
							console.log('this.selectProduct', this.selectProduct)
						}
						this.selectProduct=this.selectProduct.toString()
						this.selectProduct=this.selectProduct.replace(',', ' ')
					
						console.log('this.selectProduct', this.selectProduct)
					},
				deep: true,
			},
			// addnum: {
			// 	hander(newName, oldName) {
			// 		console.log('addnum, oldName', newName)
			// 	}
			// },
			areaId: {
				handler(newName, oldName) {
					this.addgoodId = newName
				
				},

			},
			goodsData: {
				handler(newName, oldName) {
					console.log('第二层goodsData==========================', newName)
					this.addareaId = newName.goods.areaId
					this.addgoodId = newName.goods.goodsId
					for (let i = 0; i < this.selectedItem.length; i++) {
						if(this.selectedItem[i]===''){
							this.addgoodId=''
						}
						// this.selectProduct.push(newName[i])
						// console.log('this.selectProduct', this.selectProduct)
					}
					console.log('this.addareaId', this.addareaId)
					console.log('this.addgoodId', this.addgoodId)
				},
				deep: true,
				immediate: true
			},
			updateAddress:{
				handler(newName, oldName) {
					console.log('传入是否更新地址列表数据',newName);
					this.loadAddrList()
				},
				deep: true,
			}
		},
		computed: {
			isNeedMove() {
				return !(this.itemHeight * this.list.length > this.scrollHeight)
			},
			...mapState(['hasLogin'])
		},
		data() {
			return {
				selectProduct: '',
				addgoodId: '',
				addareaId: '',
				addNums: '',
				selectIndex: -1,
				checkboxData: [],
				color: '#4D7BFE',
				hasChoose: false,
				isShowStockUnlogin:false,
				menuList: [{
					'title': '单选',
					'type': 'custom',
					'key': 'custom2',
					'isMutiple': false, //单选
					'detailList': [{
						title: '选项1',
						value: "1",
					}, {
						title: '选项2',
						value: "2",
					}],
				}],
				num: 0,
				idArr: [],
				lists: [],
				addressData: {
					consigneeName: '',
					mobile: '',
					areaId: '',
					areaName: '',
					addr: '',
					isDefault: false,
					email: ''
				},
				province: [],
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				valueArr: [0, 0, 0, 0], //用于判断当前滑动的那一列
				areaIds: '',
				source: 0,
				addrPage: 1,
				selectData: '子组件',
				addrData: {
					// records: [{
					// 	areaName: 'ssss',
					// 	consigneeName: 'ssss'
					// }, {
					// 	areaName: 'ssss',
					// 	consigneeName: 'ssss'
					// }, {
					// 	areaName: 'ssss',
					// 	consigneeName: 'ssss'
					// }]
				},
			};
		},
		// created() {
		// 	uni.hideLoading();
		// 	this.checkboxData=this.selectDatas
		// 	this.$nextTick(() => {

		// 		this.checkboxData.forEach((item, index) => {
		// 			// 给每一个 组件调用一次 set 方法
		// 			// console.log('item/data',item.data)
		// 			this.$refs.checkbox[index].set(item.data);
		// 		})
		// 		// this.this.selectDatas.forEach((item, index) => {
		// 		// 	// 给每一个 组件调用一次 set 方法
		// 		// 	this.$refs.checkbox[index].set(item.data);
		// 		// })
		// 	})
		// },
		mounted() {
			this.initLoadArea()
			if(this.hasLogin) {
				this.loadAddrList()
				this.isShowStockUnlogin = true
			}else {
			let setting = uni.getStorageSync("portalSettingsInfo")
			if(setting.unLoginShowModule&&setting.unLoginShowModule.indexOf('0') > -1){
			          this.isShowStockUnlogin = true;
			        };
		}	
			uni.hideLoading();
			// console.log('第二次子组件的', this.selectDatas)
			this.checkboxData = this.selectDatas
			// console.log('checkdata', this.checkboxData)
			console.log('selectGood',this.selectGood);


		},
		methods: {
			loadData(id) {
				console.log('第二层组件调用的方法++++++++++++++++++++++++++++++')
				this.$emit('loadData', id)
			},
			// 加载收货地区列表
			initLoadArea() {
				loadAddr().then(res => {
					console.log('diqu===================', res)
					if (res.code === 0) {
						this.province = res.data;
						this.loadCity(this.province[0].id)
					} else {
						this.toast(res.message)
					}
				})
			},
			loadCity(parentId) {
				const params = {
					parentId: parentId
				}
				loadChildAddr(params).then(res => {
					console.log('城市', res)
					if (res.code === 0) {
						this.city = res.data;
						if (!this.province[this.valueArr[0]].children || this.province[this.valueArr[0]].children.length===0) {
							this.$set(this.province[this.valueArr[0]], 'children', [])
							res.data.forEach(item => {
								this.province[this.valueArr[0]].children.push(item)
							})
							this.loadArea(this.province[this.valueArr[0]].children[this.valueArr[1]].id, 1)
							//this.loadArea(this.province[this.valueArr[0]].children[this.valueArr[1]].children[this.valueArr[2]].id,2)
						}
					} else {
						this.toast(res.message)
					}
				})
			},
			loadArea(parentId, level) {
				const params = {
					parentId: parentId
				}
				loadChildAddr(params).then(res => {
					if (res.code === 0) {
						this.area = res.data;
						if (level === 1) {
							if (!this.province[this.valueArr[0]].children[this.valueArr[1]].children||this.province[this.valueArr[0]].children[this.valueArr[1]].children.length===0) {
								this.$set(this.province[this.valueArr[0]].children[this.valueArr[1]], 'children',
									[])
								res.data.forEach(item => {
									this.province[this.valueArr[0]].children[this.valueArr[1]].children
										.push(item)
								})
							}
							this.loadArea(this.province[this.valueArr[0]].children[this.valueArr[1]].children[this
								.valueArr[2]].id, 2);
						} else if (level === 2) {
							if (!this.province[this.valueArr[0]].children[this.valueArr[1]].children[this.valueArr[2]].children||this.province[this.valueArr[0]].children[this.valueArr[1]].children[this.valueArr[2]].children.length===0) {
								this.$set(this.province[this.valueArr[0]].children[this.valueArr[1]].children[this
									.valueArr[2]], 'children', [])
								res.data.forEach(item => {
									this.province[this.valueArr[0]].children[this.valueArr[1]].children[
										this.valueArr[2]].children.push(item)
								})
							}
						}
					} else {
						this.toast(res.message)
					}
				})
			},
			// 选择收货地址
			bindChange(e) {
				var val = e.detail.value;
				console.log('000000000', val[0])
				if (this.valueArr[0] !== val[0]) {
					console.log('地区------------', val)
					console.log('地区------------', this.province)
					console.log('地区编号------------', this.province[val[0]].id)
					let id = this.province[val[0]].id
					console.log(typeof id)
					this.loadCity(id)
				} else if (this.valueArr[1] !== val[1]) {
					this.loadArea(this.province[val[0]].children[val[1]].id, 1)
				} else if (this.valueArr[2] !== val[2]) {
					this.loadArea(this.province[val[0]].children[val[1]].children[val[2]].id, 2)
				}
				this.valueArr = val
			},
			//加载收货地址列表
			loadAddrList() {
				const params = {
					page: this.addrPage,
					limit: 10
				}
				getAddressList(params).then(res => {
					console.log('data=========================', res)
					if (res.code === 0) {
						if (res.data !== null) {
							this.addrData = res.data;
						}
					} else {
						this.toast(res.message)
					}
				})
			},
			getListData() {
				new Promise((resolve, reject) => {
					uni.showLoading({
						title: '加载中'
					})
					// 用延迟代替 请求，模拟异步获取数据的状态
					this.requestTimeout = setTimeout(() => {
						let data = {
							status: 1,
							data: [{
									title: '颜色',
									data: {
										type: 'radio',
										// column:4,
										list: [{
												text: '黑色'
											},
											{
												text: '黑色'
											},
											{
												text: '黑色'
											},

											{
												text: '黑色'
											},
											{
												text: '黑色'
											},

											{
												text: '黑色'
											},
											{
												text: '黑色'
											},
										]
									}
								},
								{
									title: '尺寸',
									data: {
										type: 'radio',
										// column:6,
										list: [{
												text: '二层',
												value: '1'
											},
											{
												text: '二层',
												value: '2'
											},
											{
												text: '二层',
												value: '3'
											}
										]
									}
								}
							]
						}

						resolve(data);
					}, 1000);
				}).then((res) => {
					uni.hideLoading();
					this.checkboxData = res.data;
					// DOM挂载后才能使用 ref 属性调用子组件方法
					// 在有些低端设备中，会存在 nextTick 已回调，但是DOM并未挂载的情况，可以通过 setTimeout 解决
					this.$nextTick(() => {

						this.checkboxData.forEach((item, index) => {
							// 给每一个 组件调用一次 set 方法
							console.log('index', index)
							this.$refs.checkbox[index].set(item.data);
						})
					})
				})
			},
			onChange(data, keyName) {
				this.addgoodId = ''
				// console.log(`数据值：`, data);
				console.log(`标识名：`, keyName);
				this.addgoodId = keyName
				this.$emit('loadData', keyName)
			},
			//筛选返回值
			resultConditon(obj) {
				this.$refs.condition.visibleDrawer = false;
				this.hasChoose = obj.hasChoose;
				console.log(obj);
			},
			orderbyChange(obj) {
				this.$refs.condition.visibleDrawer = true;
			},
			// //加载收货地址列表
			// loadAddrList() {
			// 	const params = {
			// 		page: this.addrPage,
			// 		limit: 10
			// 	}
			// 	getAddressList(params).then(res => {
			// 		if (res.code === 0) {
			// 			if (res.data !== null) {
			// 				this.addrData = res.data;
			// 				// console.log('地址', this.addrData)
			// 			}
			// 		} else {
			// 			this.toast(res.message)
			// 		}
			// 	})
			// },
			// 新增收货地址
			toggleTab() {
				this.$refs.popup.open();
			},
			//选择地址
			checkAddress(item) {
				console.log('选择收货地址', item)
				this.$emit('selectAddress', item)
				this.selectIndex = item.id
			},
			// 取消
			cancel() {
				this.$refs.popup.close();
			},
			// 确定
			confirm() {
				this.$refs.popup.close();
				let children = this.province[this.valueArr[0]].children[this.valueArr[1]].children[this.valueArr[2]]
					.children
				if (children && children.length > 0) {
					this.addressData.areaName = this.province[this.valueArr[0]].name + '/' + this.province[this.valueArr[
							0]].children[
							this.valueArr[1]].name +
						'/' +
						this.province[this.valueArr[0]].children[this.valueArr[1]].children[this.valueArr[2]].name +
						'/' + children[this.valueArr[3]].name

					this.areaIds = children[this.valueArr[3]].id;
				} else {
					this.addressData.areaName = this.province[this.valueArr[0]].name + '/' + this.province[this.valueArr[
							0]].children[
							this.valueArr[1]].name +
						'/' +
						this.province[this.valueArr[0]].children[this.valueArr[1]].children[this.valueArr[2]].name

					this.areaIds = this.province[this.valueArr[0]].children[this.valueArr[1]].children[this.valueArr[2]]
						.id;
				}
				let address = {}
				address.areaName = this.addressData.areaName
				address.areaIds = this.areaIds
				this.$emit('selectAddress', address)
				this.maskTouch()
			},
			// 新增收货地址
			addAddress(type,item) {
				uni.navigateTo({
					url: `/pages/address/addressManage?type=${type}&data=${JSON.stringify(item)}` 
				})
			},
			changenum(num) {

				this.$emit('changenum', num)
			},

			// 计数器
			handleCountClick(val, index) {
				console.log(val, index)
				this.addNums = val
				this.changenum(val)
				// this.num=0
				// this.mydata[index]['num'] = val
			},
			// 立即购买
			buyGood() {
				if(!this.hasLogin) return
				console.log('立即购买')
				if (this.addgoodId === '') {
				
					this.$util.msg('请选择商品类型')
					return
				} else if (this.addareaId === '') {
					this.$util.msg('请选择地区')
					return
				} else if (this.addNums === "") {
					console.log('商品数量为空')
					this.$util.msg('请选择商品数量')
					return
				}
				if(this.goodsData.goods.protocolType=='02'&&this.sampleApplication){
					this.$util.msg('集采商品请提交打样！')
					return
				}
				let params = {
					num: this.addNums,
					goodsId: this.addgoodId,
					areaId: this.addareaId
				};
				
				bugGoods(params).then(res => {
					if (res.code === 0) {
						this.$util.msg('购买成功')
						uni.navigateTo({
							url: `/pages/order/createOrder`
						})

						this.maskTouch()

					} else {
						this.$util.msg(res.message)
					}
					this.receviverMsg(res)
				})

			},
			// 加入购物车
			addCarts() {
				if(!this.hasLogin) return

				if (this.addgoodId === '') {
					console.log('this.addgoodId为空')
					this.$util.msg('请选择商品类型')
					return
				} else if (this.addareaId === '') {
					this.$util.msg('请选择地区')
					return
				} else if (this.addNums === "") {
					console.log('商品数量为空')
					this.$util.msg('请选择商品数量')
					return
				}


				let params = {
					num: this.addNums,
					goodsId: this.addgoodId,
					areaId: this.addareaId
				};

				addToCart(params).then(res => {
					
					if (res.code === 0) {
						this.$util.msg('加入购物车成功')
						this.maskTouch()

					} else if(res.code === 1001) {
						let msg = ''
						if(res.extra.productAvailability) {
							msg = res.extra.productAvailability.filter(item => !item.canPurchase).map(item => item.message).toString()
						}
						this.$util.msg(res.message+' '+msg)
					}
					else {
						this.$util.msg(res.message)
					}
					this.receviverMsg(res)
				})
			},
			isChoosed(id) {
				return this.idArr.includes(id)
			},
			addTarget(item) {
				if (this.idArr.includes(item[this.idKey])) {
					this.idArr.splice(this.idArr.indexOf(item[this.idKey]), 1);
				} else {
					this.idArr.push(item[this.idKey]);
				}
			},
			getChildData() {
				this.$emit('getChildData', this.selectData)
			},
			receviverMsg(res) {
				this.$emit('receviverMsg', res)
			},
			maskTouch() {
				this.$emit('maskTouch')
			},
			cancle() {
				this.$emit('cancle')
			},
			sure() {
				let textArr = []
				this.list.forEach(item => {
					this.idArr.includes(item[this.idKey]) && textArr.push(item[this.showKey])
				})
				this.$emit('sure', {
					idArr: this.idArr,
					textArr
				})
			},
			selectAll() {
				let idArr = []
				this.list.forEach(item => {
					idArr.push(item[this.idKey])
				})
				this.idArr = idArr
			},
			clearAll() {
				this.idArr = []
			}
		}
	};
</script>

<style lang='scss' scoped>
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
		background-color: rgba(0, 0, 0, 0.6);
		opacity: 1;
		visibility: visible;
		transition: all 0.3s;
	}

	.main-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
		border-radius: 26rpx 26rpx 0 0;
		z-index: 100;
		transform: translateY(100%);
		transition: all 0.3s;
		overflow: hidden;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	}

	.top-box {
		width: 100%;
		height: 80rpx;
		/* display: flex; */
		align-items: center;
		/* justify-content: space-between; */
		padding: 0 30rpx;
		/* box-sizing: border-box; */
		/* position: relative; */
	}

	.top-box::after {
		position: absolute;
		content: '';
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1rpx;
		transform: scaleY(0.5);
		background-color: #f1f1f1;
	}

	.top-btn {
		color: #007aff;
	}

	.scroll-box {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.item-group {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.scroll-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		flex-shrink: 0;
	}

	.tick {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	/* 
	选择商品规格样式 
	 */
	.left {
		width: 220rpx;
		height: 220rpx;
		border-radius: 10rpx;
		background-color: $border-color-light;
	}

	.right {
		/* flex: 1; */
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		/* justify-content: space-between; */
		margin-top: 30rpx;

		.money-box {
			text-align: left;

			.integral {
				display: inline-block;
				color: $uni-color-primary;
				font-size: 15px;

				&:before {
					background: url(../../static/money.png) no-repeat;
					width: 22rpx;
					height: 22rpx;
					margin-right: 4rpx;
					display: inline-block;
					content: '';
					background-size: contain;
				}

				&:after {
					margin-left: 4rpx;
					content: '积分';
					color: #909090;
					font-size: 12px;
				}
			}
		}
	}

	/deep/ .price {
		color: #FF0000;
		font-size: 20px;
	}

	.add,
	.subtract {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		color: #333;
		font-size: 40rpx;
		border: 1rpx solid #e5e5e5;
		background-color: #f8f8f8;

		&.disabled {
			color: $font-color-disabled;
		}
	}

	.count {
		display: flex;
		align-items: center;
		width: 100rpx;
		height: 60rpx;
		line-height: 50rpx;
		font-size: 14px;
		text-align: center;
		border-top: 1rpx solid #e5e5e5;
		border-bottom: 1rpx solid #e5e5e5;
		background-color: #fff;
	}

	.stack {
		color: #dd524d;
		padding-top: 6px;
		padding-left: 3px;
	}


	.select-list-con {
		background: rgba(93, 92, 254, 0.1);
		border-radius: 28px;
		color: #666666;
		font-size: 28rpx;
		padding: 10rpx 28rpx;
		margin: 10rpx 10rpx 10rpx 0;
		display: inline-block;
	}

	.list-item {
		flex-basis: calc(30% - 30px);
		/* flex-shrink: 0; */
		display: flex;
		margin: 1rpx;
		padding: 2rpx;
		justify-content: space-between;
		align-items: center;

		/*border: 1px solid #e7e7e7;*/
		& .text-info {
			/* 			& .title {
				margin-bottom: 20px;
			} */

			& .sub-title {
				color: #8b8b8b;
			}
		}

		& .nums {
			font-size: 28px;
		}


	}

	.select-btn {

		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		font-size: 12px;

		&:after {
			border-radius: 100px;
		}
	}

	.select-btn-add {
		width: calc((100% - 30rpx) / 2);
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		font-size: 12px;

		/* background-color: #ff5500;
		color: #ffffff;*/
		&:after {
			border-radius: 100px;
		}
	}

	/* button样式改写 */
	uni-button,
	button {
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		font-size: 12px;
		/* font-weight: normal; */

		&.no-border:before,
		&.no-border:after {
			border: 0;
		}
	}

	uni-button[type=default] {
		background-color: #FFAA00;
	}

	button[type=default] {
		color: #FFFFFF;
	}

	.select-btn-buy {
		width: calc((100% - 30rpx) / 2);
		margin-left: 30rpx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		font-size: 12px;
		/* 		background-color: #FFAA00;
		color: #FFFFFF; */

		&:after {
			border-radius: 100px;
		}
	}

	/* 按钮外围 */
	.flex-wrap {
		display: flex;
		/* align-items: center; */
		flex-wrap: wrap;
		margin: 10rpx;
	}

	.list-cell {
		display: flex;
		align-items: baseline;
		padding: 20upx $page-row-spacing;
		line-height: 50upx;
		position: relative;
		background: #fff;
		/* flex-direction: column; */
		/* justify-content: space-between; */

		&.log-out-btn {
			margin-top: 30upx;

			.cell-tit {
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}

		.tag {
			font-size: 24upx;
			width: fit-content;
			text-align: center;
			color: $base-color;
			margin-right: 10upx;
			background: #fffafb;
			border: 1px solid #ffb4c7;
			border-radius: 4upx;
			padding: 0upx 5upx;
			line-height: 1;
		}

		&.cell-hover {
			background: #fafafa;
		}

		&.m-t {
			/* margin-top: 16upx; */
		}

		.cell-more {
			align-self: baseline;
			font-size: $font-lg;
			color: $font-color-light;
			margin-left: 10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: $font-sm;
			color: $font-color-dark;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: $font-base;
			color: $font-color-light;
		}
	}

	/*边框*/
	.b-b:after,
	.b-t:after {
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		height: 0;
		content: '';
		transform: scaleY(.5);
		border-bottom: 1px solid $border-color-base;
	}

	.b-b:after {
		bottom: 0;
	}

	.b-t:after {
		top: 0;
	}

	.c-list {
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;

		.c-row {
			display: flex;
			align-items: center;
			/* padding: 20upx 30upx; */
			position: relative;
			vertical-align: middle;

			.tits {
				color: $font-color-light;
				/* width: 200upx; */
			}
		}

		.item-list {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			text-align: center;

			text {
				background: #eee;
				margin-right: 16upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				padding: 10rpx 20upx;
				font-size: $font-base;
				min-width: 120rpx;
				color: $font-color-dark;
			}

			.selected {
				background: #fbebee;
				color: $uni-color-primary;
			}

			.isdisabled {
				background: $my-border-color;
				color: $my-text-color-grey;
			}
		}

		.uni-num-box {
			display: flex;
			margin-right: 3px;

			.add,
			.subtract {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 60rpx;
				height: 60rpx;
				color: #333;
				font-size: 38rpx;
				border: 1rpx solid #e5e5e5;
				background-color: #f8f8f8;

				&.disabled {
					color: $font-color-disabled;
				}
			}

			.count {
				display: flex;
				align-items: center;
				width: 100rpx;
				height: 60rpx;
				line-height: 50rpx;
				font-size: 14px;
				text-align: center;
				border-top: 1rpx solid #e5e5e5;
				border-bottom: 1rpx solid #e5e5e5;
				background-color: #fff;
			}
		}

		.tit {
			width: 200upx;
		}

		.con {
			//flex: 1;
			color: $font-color-dark;

			.selected-text {
				margin-right: 10upx;
			}
		}

		.m-price {
			flex: 1;
			;
			color: $font-color-light;
			text-decoration: line-through;
		}

		.bz-list {
			height: 40upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;

			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}

		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
		}

		.red {
			color: $uni-color-primary;
		}
	}

	.c-row {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		position: relative;
		vertical-align: middle;


	}

	.tits {
		width: 140upx;
	}

	.tits-ps {
		width: 200upx;
	}

	/* 	.tit {
		width: 140upx;
	}
		
	.con {
		//flex: 1;
		color: $font-color-dark;
		
		.selected-text {
			margin-right: 10upx;
		}
	} */

	.s-list {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		background: #fff;
		position: relative;

	}

	/* 地址 */
	.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.address-box {
		display: flex;
		align-items: center;

		.tag {
			font-size: 24upx;
			width: fit-content;
			text-align: center;
			color: $base-color;
			margin-right: 10upx;
			background: #fffafb;
			border: 1px solid #ffb4c7;
			border-radius: 4upx;
			padding: 4upx 10upx;
			line-height: 1;
		}


		.address {
			font-size: 30upx;
			flex: 1;
			/* color: $font-color-dark; */
		}





	}

	/* 已选样式 */
	.ys-list {
		display: flex;
		justify-content: center;
		margin-top: 10rpx;
	}

	.ys-list-title {
		flex: 16;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
	}

	.m-message {
		flex: 1;
		color: $font-color-light;
		/* text-decoration: line-through; */
	}
</style>

<style lang="scss">
	.active>text {
		background: #fbecee;
		border-radius: 20px;
		color: #55aaff;
		font-size: 28rpx;
		// padding: 10rpx 28rpx;
		/* margin: 10rpx 10rpx 10rpx 0; */
		display: inline-block;
	}

	.active>view {
		/* background: #fbecee; */
		/* border-radius: 20px; */
		color: $my-text-color-active;
		font-size: 28rpx;
		// padding: 10rpx 28rpx;
		/* margin: 10rpx 10rpx 10rpx 0; */
		display: inline-block;
	}

	.active {
		// background-color: #ff0000;


		// border: #ff0000 solid 1px;

		// &::before{
		// 	content: '';
		// 	display:block;
		// 	width: 20px;
		// 	height: 20px;
		// 	background-color: #ff0000;
		// 	position: absolute;
		// 	right: -1px;
		// 	bottom: -1px;
		// 	z-index: 1;
		// 	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
		// }
		&::after {
			content: '';
			display: block;
			width: 3px;
			height: 6px;
			border-right: #fff solid 2px;
			border-bottom: #fff solid 2px;
			transform: rotate(25deg);
			position: absolute;
			right: 3px;
			bottom: 3px;
			z-index: 2;
		}

	}

	page {
		background-color: #f2f2f2;
	}

	.panel {
		background-color: #fff;
		margin-bottom: 20rpx;
		// padding: 20rpx 20rpx 0 20rpx;

		&-head {
			font-size: 28rpx;
		}

		&-body {
			margin-top: 20rpx;
			padding: 20rpx 0 0 0;
			// border-top: #eee solid 1px;
			overflow: hidden;

			>button {
				display: block;
				float: left;
				margin: 0 20rpx 20rpx 0;
				border: #007aff solid 1px;
				padding: 0 20rpx;
				border-radius: 0;

				&:after {
					display: none;
				}
			}
		}
	}
</style>

<style lang="scss" scoped>
	.popup {
		height: fit-content;
		width: 100%;
		background: #fff;
	}

	.picker-btn {
		display: flex;
		height: 100upx;
		width: 100%;
		line-height: 100upx;
		background: #fff;
		font-size: 34upx;
		z-index: 1;
		border-bottom: 1rpx solid #ccc;

		.lefts {
			flex: 1;
			color: #0076FF;
			padding-left: 40upx;
			box-sizing: border-box;
		}

		.rights {
			flex: 1;
			text-align: right;
			padding-right: 40upx;
			color: #FE4533;
			box-sizing: border-box;
		}
	}

	picker-view {
		width: 100%;
		height: 500rpx;
		display: relative;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>
